<template>
  <div class="albuminfo">
    <div class="albuminfo_left">
      <!-- 专辑信息 -->
      <div class="info">
        <div class="info_left">
          <img :src="AlbumInfoList.blurPicUrl" />
        </div>
        <div class="info_right">
          <div class="info_right_a">
            <span></span><span>{{ AlbumInfoList.name }}</span>
          </div>
          <div class="info_right_b">
            歌手：<span v-for="(v, i) in AlbumInfoList.artists" :key="i"
              ><span v-if="i > 0">/</span
              ><router-link :to="`/singerInfo/${v.id}`">{{ v.name }}</router-link></span
            >
          </div>
          <div class="info_right_c">
            发行时间：{{ timestampToTime(AlbumInfoList.publishTime) }}
          </div>
          <div class="info_right_d">发行公司：{{ AlbumInfoList.company }}</div>
          <div class="info_right_e">
            <ul>
              <li><span>播放</span></li>
              <li><span>收藏</span></li>
              <li>
                <span>分享({{ AlbumInfoList.info.shareCount }})</span>
              </li>
              <li><span>下载</span></li>
              <li>
                <span>评论({{ AlbumInfoList.info.commentCount }})</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 专辑介绍 -->
      <div class="introduce">
        <h6>专辑介绍：</h6>
        <div class="introduce_a">
          <p v-for="(v, i) in AlbumIntroduce" :key="i">{{ v }}</p>
        </div>
        <div class="introduce_b" @click="switchHeight()">
          <span>{{ isshow }}</span>
        </div>
      </div>
      <!-- 专辑歌曲列表 -->
      <div class="songlist">
        <div class="songlist_top">
          <h3>包含歌曲列表</h3>
          <span>{{ AlbumSongList.length }}首歌</span>
        </div>
        <table>
          <thead>
            <tr>
              <td></td>
              <td>歌曲标题</td>
              <td>时长</td>
              <td>歌手</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v, i) in AlbumSongList" :key="i">
              <td>{{ i + 1}}<span class="iconfont icon-bofang" @click="getmusicId(v.id)"></span></td>
              <td> <span><router-link :to="`/songinfo/${v.id}`">{{v.name}}</router-link></span><span v-if="v.alia.length>0">&nbsp;-&nbsp;</span>{{ v.alia[0] }}</td>
              <td>{{ changetime(v.dt) }}</td>
              <td>
                <span v-for="(q, w) in v.ar" :key="w"
                  ><span v-if="w > 0">/</span
                  ><router-link :to="`/SingerInfo/${q.id}`">{{ q.name }}</router-link></span
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 评论 -->
      <div class="comment">
        <Comment :Album="Album"></Comment>
      </div>
    </div>
    <div class="albuminfo_right">
      <!-- TA的其他热门专辑 -->
      <div class="other">
        <div class="other_header">
          <h6>Ta的其他热门专辑</h6>
          <span><router-link to="#">全部</router-link></span>
        </div>
        <div class="other_content" v-for="(v,i) in OtherHot" :key="i">
          <div class="other_a"><router-link :to="`${v.id}`"><img :src="v.blurPicUrl"></router-link></div>
          <div class="other_b">
            <div><router-link :to="`${v.id}`">{{v.name}}</router-link></div>
            <div>{{timestampToTime(v.publishTime)}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapMutations } from "vuex";
import Comment from "../components/Comment.vue";
export default {
  components: { Comment },
  data() {
    return {
      otherId: "",
      Album: true,
      // 专辑信息
      AlbumInfoList: {
        info: {
          shareCount: 0,
          commentCount: 0,
        },
      },
      // 专辑歌曲
      AlbumSongList: {},
      // 专辑介绍
      AlbumIntroduce: {},
      //
      isshow: "展开",
      // 其他热门专辑
      OtherHot: {},
    };
  },
  //
  methods: {
    ...mapMutations(["getmusicId"]),
    //   获取专辑数据
    getAlbumInfoData() {
      axios
        .get(`http://127.0.0.1:3000/album?id=${this.$route.params.id}`)
        .then((res) => {
          this.AlbumInfoList = res.data.album;
          this.otherId = res.data.album.artists[0].id;
          this.AlbumSongList = res.data.songs;
          this.AlbumIntroduce = res.data.album.description.split("\n");
          this.getotherData();
        });
    },
    // 获取歌手的其他热门专辑
    getotherData() {
      axios
        .get(`http://127.0.0.1:3000/artist/album?id=${this.otherId}&limit=10`)
        .then((res) => {
          this.OtherHot = res.data.hotAlbums;
        });
    },
    // 转换时间戳
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      let D = (date.getDate() + 1 < 10 ? "0" + (date.getDate() + 1) : date.getDate() + 1) ;
      return Y + M + D;
    },
    changetime(e) {
      let m =
        Math.floor(e / 1000 / 60) > 9
          ? Math.floor(e / 1000 / 60)
          : "0" + Math.floor(e / 1000 / 60);
      let s =
        Math.floor(e / 1000 - m * 60) > 9
          ? Math.floor(e / 1000 - m * 60)
          : "0" + Math.floor(e / 1000 - m * 60);
      return m + ":" + s;
    },
    // 显示隐藏专辑介绍
    switchHeight() {
      if (this.isshow === "收起") {
        document.querySelector(".introduce_a").style.height = "80px";
        this.isshow = "展开";
      } else {
        document.querySelector(".introduce_a").style.height = "100%";
        this.isshow = "收起";
      }
      document.querySelector("body").scrollIntoView({
        block: "center", // 上边框与视窗顶部部平齐
      });
    },
  },
  //
  created() {
    this.getAlbumInfoData();
  },
};
</script>
<style scoped>
.albuminfo {
  width: 980px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}
.albuminfo .albuminfo_left {
  width: 710px;
  border-right: 1px solid #d3d3d3;
  padding: 47px 30px 40px 38px;
}
/* 专辑信息 */
.info {
  display: flex;
}
.info_left {
  width: 210px;
  height: 177px;
  background: url("../../public/images/coverall.png") no-repeat 0 -986px;
}
.info_left img {
  width: 177px;
  height: 177px;
}
.info_right {
  margin-left: 20px;
}
.info_right .info_right_a {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.info_right .info_right_a > span:nth-child(1) {
  display: block;
  width: 54px;
  height: 24px;
  background: url("../../public/images/icon.png") no-repeat 0 -186px;
}
.info_right .info_right_a > span:nth-child(2) {
  font-size: 20px;
  margin-left: 10px;
}
.info_right .info_right_b {
  font-size: 12px;
  color: #666666;
}
.info_right .info_right_b a {
  color: #0c73c2;
}
.info_right .info_right_b a:hover {
  text-decoration: underline;
}
.info_right .info_right_c {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.info_right .info_right_d {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.info_right .info_right_e {
  margin-top: 20px;
}
.info_right .info_right_e ul {
  display: flex;
}
.info_right .info_right_e ul li {
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid #cdcdcd;
  margin-right: 5px;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 5px;
  cursor: pointer;
}
.info_right .info_right_e ul li:nth-child(1) {
  background-color: #3080cc;
  color: #fff;
}
.info_right .info_right_e ul li:nth-child(1):hover {
  background-color: #4892d8;
}
.info_right .info_right_e ul li:hover {
  background-color: #fff;
}
.info_right .info_right_e ul li span {
  font-size: 12px;
}
/* 专辑介绍 */
.introduce {
  margin-top: 20px;
}
.introduce .introduce_a {
  height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.introduce .introduce_a p {
  color: #666;
  text-indent: 24px;
  line-height: 24px;
  margin-top: 4px;
  font-size: 12px;
}
.introduce .introduce_b {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  cursor: pointer;
  color: #0c73c2;
}
/* 专辑歌曲列表 */
.songlist {
  margin-top: 20px;
}
.songlist .songlist_top {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #c20c0c;
  padding-bottom: 10px;
}
.songlist .songlist_top h3 {
  font-weight: 400;
  font-size: 20px;
}
.songlist .songlist_top span {
  margin-left: 20px;
  color: #666666;
  font-size: 12px;
}
table {
  width: 100%;
  border-collapse: collapse;
  padding: 0;
  display: flex;
  flex-direction: column;
}
table > thead {
  width: 100%;
}
table > thead > tr {
  width: 100%;
  display: flex;
  background: #fcfcfc;
  border-bottom: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}
table > thead > tr > td {
  border-right: 1px solid #d3d3d3;
  padding: 8px 10px;
  font-size: 12px;
}
table > thead > tr > td:nth-child(1) {
  flex: 1;
}
table > thead > tr > td:nth-child(2) {
  flex: 7;
}
table > thead > tr > td:nth-child(3) {
  flex: 1.5;
}
table > thead > tr > td:nth-child(4) {
  flex: 2;
}
table > tbody {
  width: 100%;
  border: 1px solid #d3d3d3;
  border-top: none;
}
table > tbody > tr {
  display: flex;
}
table > tbody > tr > td {
  padding: 8px 10px;
  font-size: 12px;
}
table > tbody > tr:nth-child(odd) {
  background-color: #f7f7f7;
}
table > tbody > tr > td:nth-child(1) {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
}
table > tbody > tr > td:nth-child(1) span {
  font-size: 20px;
  color: #b3b3b3;
  cursor: pointer;
}
table > tbody > tr > td:nth-child(1) span:hover {
  color: #666;
}
table > tbody > tr > td:nth-child(2) {
  flex: 7;
  color: #aeaeae;
}
table > tbody > tr > td:nth-child(2) > span > a:hover {
  text-decoration: underline;
}
table > tbody > tr > td:nth-child(3) {
  flex: 1.5;
  color: #666666;
}
table > tbody > tr > td:nth-child(4) {
  flex: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table > tbody > tr > td:nth-child(4) a:hover {
  text-decoration: underline;
}
/* 评论 */
.comment {
  margin-top: 40px;
}

/* 右侧 */
.albuminfo .albuminfo_right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
/* 其他热门专辑 */
.other_header {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.other_header a{
color: #666666;
cursor: pointer;
}
.other_header a:hover{
  text-decoration: underline;
  
}
.other_content{
  display: flex;
  margin-bottom: 15px;
}
.other_content .other_a img{
  width: 50px;
  height: 50px;
}
.other_content .other_b{
  font-size: 12px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.other_content .other_b div{
  width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666666;
}
.other_content .other_b div a{
  font-size: 14px;
}
.other_content .other_b div a:hover{
  text-decoration: underline;
}
</style>